<!DOCTYPE html>
<html>

<head>
    <title>LeafletPlayback</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" rel="stylesheet" type="text/css" />
    <style>
    #map {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
    
    #title_container {
        z-index: 10000;
        position: fixed;
        left: 100px;
    }

    body {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        }

    h1 {
        font-size: 36px;
        font-weight: 300;
        line-height: 1.1;
    }

    .datetimeControl p {
        margin: 0;
        font-size: 16px;
    }
    </style>
</head>

<body>
    <div id="title_container">
        <h1>Example 4</h1>
        <p>Basic example of GPX loading in LeafletPlayback</p>
    </div>
    
    <div id="map"></div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet-src.js"></script>

    <script src="../dist/LeafletPlayback.js"></script>
   
    <script src="example_4.js"></script>  
</body>
</html>
